/**
 * @author lzb
 * 导出模板配置
 */
import {inputComponents, selectComponents, layoutComponents, formConf} from './config'
import FromItems from "./FromItems";
// import { saveAs } from 'file-saver'

export default class Generator {
    layoutList = [];

    /**
     * 布局json集合
     * @param layoutList
     */
    constructor(layoutList) {
        this.layoutList = layoutList;

    }

    /**
     * 开始生成vue
     */
    buildHtml() {
        let templateHtml = this.templateHtml()
        return templateHtml;
    }

    itemHtml() {
        let htmlAppend = "";
        for (let i = 0; i < this.layoutList.length; i++) {
            let item = this.layoutList[i];
            let fromItems = new FromItems(item);
            let html = fromItems.swByTag(item.tag);
            htmlAppend += html;
        }
        return htmlAppend;
    }

    createRules() {
        let rules = "";
        for (let i = 0; i < this.layoutList.length; i++) {
            let item = this.layoutList[i];
            if (i < this.layoutList.length) {
                rules+= `${item.vModel}: [
              {
                required: true,
                message: '${item.label}不能为空!',
                trigger: 'blur',
                }
                ],`;
            }else{
                rules+= `${item.vModel}: [
                        {
                        required: true,
                        message: '${item.label}不能为空!',
                        trigger: 'blur',
                        }
                        ]`;
            }

        }
        return rules;
    }

    /**
     * 处理template
     */
    templateHtml() {
        return`<template>
     <el-form ref="${formConf.formRef}" :model="state.${formConf.formModel}" :rules="${formConf.formRules}" :size="${formConf.size}" :label-width="${formConf.labelWidth}">
      ${this.itemHtml()}
      </el-form>
</template>
<script setup lang="ts">
import {defineAsyncComponent, reactive, onMounted, ref} from 'vue';
import type {FormInstance, FormRules} from 'element-plus'
const state = reactive({
${formConf.formModel}:{  
 }
})
const ${formConf.formRules} = reactive<FormRules>({
   ${this.createRules()}
})
// 页面加载时
onMounted(() => {
  
});
</script>
`;
    }

    //列举
}



